<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>添加权限组</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			.imgsBox  {display: inline-block; margin-right: 5px; margin-top: 5px;}
			.imgsBox img{ width: 100px;}
		</style>
	</head>

	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>网站设置</li>
				  <li class="active">权限组管理</li>
				</ol>
				<!-- <div class="" style="height:1px;background-color:#ddd"></div> -->
				<form class="form-inline searchForm" id="">
		          	<div class="form-group">
						<span class="theme-title">权限组:</span><input type="text" class="form-control" style="padding-left:12px;" name="roleName" id="roleName" placeholder="权限组名称">
		          	</div>
        		</form>
				<div class="" style="height:1px;background-color:#ddd; margin-top:20px; margin-bottom:20px;"></div>
				<span><label><input type="checkbox" name="" value="travel_label_1_0" id="allCheck" class="type-key"</label><strong>全选</strong></span>
				<div class="permissionsList">

				</div>
				<div class="" style="height:1px;background-color:#ddd; margin-top:20px; margin-bottom:20px;"></div>
				<button type="button" class="btn btn-primary btn-default" id="addBtn" data-toggle="button" aria-pressed="false" autocomplete="off">添加权限组</button>
		    </div>
		</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
	$(document).ready(function() {
		permissionsList()
	});
	function permissionsList(){
		var data = null;
		var html = '';
		$('.permissionsList').empty();
		var callback = function(res){

			for (var i = 0; i < res.data.length; i++) {
				html +=	'<div class="theme-title">'
				var cList = res.data[i].list;
				html +='<label><input type="checkbox" name="" value="'+ res.data[i].limitId +'" class="typeKey theme">'+ res.data[i].limitName +'：</label>'
				for (var k in cList) {
					html +='<label><input type="checkbox" name="" value="'+ cList[k].limitId +'" class="typeKey">'+ cList[k].limitName +'&nbsp;&nbsp;</label>'
				}
				html += '</div>'
			}
			$('.permissionsList').append(html)
		}
		ajax(
			serverURL +'/platform/queryAdminLimitList',
			data,
			callback,
			'post',
			'json',
			false
		)
	}

    $(document).on("click", "#allCheck", function() {
		if(this.checked){
        	$(".theme-title :checkbox").prop("checked", true);
	    }else{
			$(".theme-title :checkbox").prop("checked", false);
	    }
    })

	$(document).on("click", ".theme", function() {
		var _this = $(this)
		if(this.checked){
        	_this.parent().siblings().children().prop("checked", true);
	    }else{
			_this.parent().siblings().children().prop("checked", false);
	    }
    })
	// function ched(){
	// 	var str = '';
	// 	$('.typeKey:checked').each(function() {
	// 		if($(this).is(":checked")){
	// 			str += $(this).attr("value")+",";
	// 		}
	// 		if(str != null && str.length > 1){
	// 			str = str.substring(0,str.length-1);
	// 		}
	// 		 alert(str)
	// 	});
	// }
	$('#addBtn').click(function(){
		var checkID = [];//定义一个空数组
	    $(".typeKey:checked").each(function(i){//把所有被选中的复选框的值存入数组
	        checkID[i] =$(this).val();
	    });
	   var vals = checkID.join(",");
	   console.log(vals);
		var data = {
			'roleName':$('#roleName').val(),
			'roleLimit':vals
		}
		var callback = function(res){

		}
		ajax(
			serverURL +'/platform/addAdminRole',
			data,
			callback,
			'post',
			'json',
			false
		)
	})
</script>
